<template>
  <div class="ShoeColumnYeYe">
    <div class="title">
      <h3 class="left">鞋子卖场{{ type }}</h3>
      <div class="right">
        <span :class="this.type===0?'on':''" @click="type=0">全部商品</span>
        <span :class="this.type===1?'on':''" @click="type=1">男鞋</span>
        <span :class="this.type===2?'on':''" @click="type=2">女鞋</span>
      </div>
    </div>
    <Son :newList="newList"></Son>


  </div>
</template>

<script>
import Son from "@/components/ShoeColumnSunZi.vue";
export default {
  name: 'ShoeColumnYeYe-page',
  props: {},
  components: {
    Son
  },
  computed: {
    newList() {
      return this.list.filter(item => {
        if (this.type === 0) {
          return true
        } else {
          return this.type === item.type
        }
      })
    }

  },
  data() {
    return {
      type: 0,
      list: [
        {
          id: 1,
          img: 'https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i1/106798869/O1CN01fjhgx32FO3Pf7PllF_!!0-saturn_solar.jpg_200x200Q90.jpg_.webp',
          text: '欧洲站潮牌男鞋百搭新款小白鞋',
          price: 278,
          bool: true,
          trendsPrice: '',
          type: 1
        },
        {
          id: 2,
          img: 'https://img.alicdn.com/imgextra/i3/725951136/TB2I9TomQ7mBKNjSZFyXXbydFXa_!!725951136.jpg_200x200q90.jpg',
          text: '回力男鞋帆布鞋低帮网球田径运动跑',
          price: 79,
          bool: true,
          trendsPrice: '',
          type: 1
        }, {
          id: 3,
          img: 'https://img.alicdn.com/imgextra/https://img.alicdn.com/imgextra/i3/92688455/O1CN012kTige2CKRUgvB3zk_!!92688455.jpg_400x400q90.jpg',
          text: '李宁跑步鞋男网面透气男鞋夏季减震跑鞋轻',
          price: 278,
          bool: true,
          trendsPrice: '',
          type: 1
        }, {
          id: 4,
          img: 'https://gd2.alicdn.com/imgextra/i2/0/O1CN016l0koq1INXhYcmHWe_!!0-item_pic.jpg_200x200.jpg',
          text: '【王小毒】星河灿烂●芭蕾鞋2022百搭',
          price: 289,
          bool: true,
          trendsPrice: '',
          type: 2
        }, {
          id: 5,
          img: 'https://gd2.alicdn.com/imgextra/i3/1900994914/O1CN01vAp9Rm1mAesfPFQ4o_!!1900994914-0-lubanu-s.jpg_200x200.jpg',
          text: '尖头高跟鞋女细跟2022年新款夏季少女',
          price: 148,
          bool: true,
          trendsPrice: '',
          type: 2
        }, {
          id: 6,
          img: 'https://gd4.alicdn.com/imgextra/i2/1658155406/O1CN01EmNOhC1pnzmg6lwqm_!!1658155406.jpg',
          text: '漆皮黑色高跟鞋时尚浅口10CM性感超',
          price: 179,
          bool: true,
          trendsPrice: '',
          type: 2
        }

      ],
    }
  },
  methods: {}
}
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  width: 1100px;
  position: relative;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);

  .left {
    color: #999;
  }

  .right {
    span {
      margin: 0 10px;
      cursor: pointer;
    }

    span:hover {
      color: red;
    }

  }

}
.on {
  color: red;
}

</style>

